<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost/shop-resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">

    <!--SWF在初始化的时候指定，在后面将展示-->
</head>

<body>
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="iPhone12" autocomplete="off" placeholder="" id="user-name"
                       name="gname" datatype="*" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="2999.9" placeholder="" id="user-tel" name="gprice"
                       datatype="*" nullmsg="手机不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" name="gstock" value="100" id="email" datatype="n"
                       nullmsg="请输入邮箱！">
                <input type="hidden" name="gpic" id="gpic">

            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>图片：</label>
            <div class="formControls col-5">
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
            </div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <label class="form-label col-3">商品描述：</label>
            <div class="formControls col-5">
                <textarea name="gdesc" cols="" rows="" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true"
                          onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/formUtils.js"></script>
<!--引入JS-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>

<!-- 引入时间的资源文件-->
<script type="text/javascript" src="http://localhost/shop-resources/back/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    $(function () {
        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,
            // 文件接收服务端。
            server: 'http://localhost/shop-resources/fileUpload/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            $("#fileList").append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 100, 150);
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, resp) {
            //要判断是否有路径，不然会覆盖原来的图片
            var path = $("#gpic").val();
            //有路径则true
            if (path) {
                //判断已经存在一个图片地址，把新的图片地址用|隔开，拼接上去，再覆盖掉原来的path,存入隐藏域
                var newPath = resp._raw
                path = path + "|" + newPath
            } else {
                //没有存在图片，就把这个新存的图片地址赋值给path，存入隐藏域中
                var path = resp._raw
            }
            //隐藏域
            $("#gpic").val(path)

        });

        //    // 文件上传失败，显示上传出错。
        // uploader.on('uploadError', function (file) {
        //     var $li = $('#' + file.id),
        //         $error = $li.find('div.error');
        //
        //     // 避免重复创建
        //     if (!$error.length) {
        //         $error = $('<div class="error"></div>').appendTo($li);
        //     }
        //
        //     $error.text('上传失败');
        // });


        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-admin-add").Validform({
            tiptype: 2,
            callback: function (form) { // 表单验证成功后回调
                submitForm(form, "http://localhost/shop-back/goods/addGoods");
                return false;  // 返回false表单不会提交
            }
        });
    });
</script>
</body>
</html>